<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from "vue-router";
import { login, getUserInfo } from '@/api/login';
import { showLoadingToast, closeToast } from 'vant';
import { useInfoStore } from '@/stores/userInfo'
const router = useRouter()
const store = useInfoStore()
const username = ref('')
const password = ref('')
const go = (url) => {
    router.push(url)
}
const onSubmit = (values) => {
    login(values).then(res => {
        if (res.status == 200) {
            console.log(res);
            store.saveToken(res.data.token)
            getUserInfo().then(userRes => {
                const toast = showLoadingToast({
                    duration: 0,
                    forbidClick: true,
                    message: '正在登录中'
                })
                store.saveUser(res.data)
                toast.message = "登录成功"
                toast.icon = "success"
                closeToast()
                setTimeout(function () {
                    router.push("/")
                }, 500)
            })
        }
    })
}
// 逻辑代码
</script>

<template>
    <div class="wrapper">
        <div class="left-top-sign">
            LOGIN
        </div>
        <div class="welcome">
            登录
        </div>
    </div>
    <div class="input-content">
        <van-form @submit="onSubmit">
            <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" name="password" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <div style="margin: 16px;">
                <van-button round block type="danger" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
    <div class="register-section">
        还没有账号？
        <span @click="go('/register')">马上注册</span>
    </div>

</template>

<style lang="scss" scoped>
@use "@/assets/uni.scss" as *;

.container {
    width: 100%;
    padding-top: 50px;
    position: absolute;
    height: 92.5%;
    overflow: hidden;
    background: #fff;

}

.wrapper {
    position: relative;
    z-index: 90;
    background: #fff;
    padding-bottom: 20px;
}

.btn {
    background-color: #5695f9;
    color: #fff;
    padding: 3px;
    border-radius: 2px;

}

.left-top-sign {
    font-size: 60px;
    color: #f8f8f8;
    position: relative;
    left: -8px;
}

.welcome {
    position: relative;
    left: 25px;
    top: -45px;
    font-size: 23px;
    color: #555;
}

.input-content {
    padding: 0 30px;
}

.input-item {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    padding: 0 15px;
    background: #f8f6fc;
    height: 60px;
    border-radius: 4px;
    margin-bottom: 25px;

    &:last-child {
        margin-bottom: 0%;
    }
}

.tit {
    height: 25px;
    line-height: 28px;
    font-size: 13px;
    color: #606266;
}

input {
    height: 30px;
    font-size: 15px;
    color: #303133;
    width: 100%;
}

.confirm-btn {
    width: 315px;
    height: 38px;
    line-height: 38px;
    border-radius: 50px;
    margin-top: 35px;
    background: #fa436a;
    color: #fff;
    font-size: 16px;
    margin-left: 7%;

    &:after {
        border-radius: 100px;
    }
}

.forget-section {
    font-size: 13px;
    color: #4399fc;
    text-align: center;
    margin-top: 20px;
}

.register-section {
    position: absolute;
    left: 0;
    bottom: 25px;
    width: 100%;
    font-size: 13px;
    color: #606266;
    text-align: center;

    text {
        color: $font-color-spec;
        margin-left: 10px;
    }
}
</style>